<template>
	<view class="pageItem">
		<view class="head">

			<view class="seach">
				<view class="s_con" @click="$r('/pages/index/seach_list?type=0')" >
					<view class="iconfont h_icon">&#xe6e7;</view>
					<view class="h_input input_no_txt">{{$t('index.seach_tip')}}</view>
					<image class="s_icon" src="/static/img/seach.png" mode="widthFix"/>
				</view>
				<view class="lang">
					<picker @change="onLocaleChange" :value="l_index" :range="local_arr" range-key="txt">
						<label class="iconfont l_icon">&#xe79a;</label>
						{{local_arr[l_index].txt}}
					</picker>
				</view>
			</view>
			<view class="hot">
				<block v-for="(item,index) in cate_list" :key="'h_'+index">
					<view class="btn" :class="movie_type == index?'btn_s':''" :data-type="index" :data-id="item.id" @click="movieTypeChange">
					      {{show_ct(index)}}
					</view>
				</block>
			</view>
		</view>
		<view class="main">
			<view class="ad_item">
				<swiper class="ad_box" indicator-dots indicator-color="#8d8d8d" indicator-active-color="#ffffff" autoplay :interval="3500" circular>
					<swiper-item v-for="(item,index) in ad_list" :key="'ad_'+index">
						<image class="ad_img" :src="realUrl(item.ad_code)"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="new_item">
				<view class="iconfont n_title">&#xe60f;</view>
				<swiper class="n_con" autoplay :interval="2500" circular vertical>
					<swiper-item class="n_box" v-for="(item,index) in note_list" :key="'ns_'+index">
						<view class="new"  @click="$r('/pages/news/newsDetail?id='+item.id)" >
						   {{item.title}}
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view v-if="vuex.appInfo.index_btn > 0" class="lottery_item" @click="$r('/pages/index/ach')" >
				<view class="l_con">{{$t('lottery.ad_txt')}}</view>
				<image class="l_bg" src="/static/img/task_bg.png"></image>
			</view>
			
			<view class="movie_item">
				<view class="m_tit" @click="$r('/pages/index/seach_list?type=1')"  >
					<view class="iconfont m_logo">&#xe6ab;</view>
					<view class="m_txt">{{$t('index.week_hot')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_con">
					<block v-for="(item,index) in video_hot" :key="index">

						<!-- #ifdef APP -->
						<view class="movie" @click="$r('/pages/popular/shortDetail?id='+item.id)" >
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)" >
						<!-- #endif -->

							<view class="tip">{{$t('index.new')}}</view>
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="movie_item">
				<view class="m_tit" @click="$r('/pages/index/seach_list?type=2')" >
					<view class="iconfont m_logo color2">&#xe680;</view>
					<view class="m_txt">{{$t('index.latest_hot')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_con">
					<block v-for="(item,index) in video_new" :key="index">

						<!-- #ifdef APP -->
						<view class="movie" @click="$r('/pages/popular/shortDetail?id='+item.id)" >
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)" >
						<!-- #endif -->

							<view class="tip">{{$t('index.new')}}</view>
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="movie_item">
				<view class="m_tit" @click="$r('/pages/index/seach_list?type=0')" >
					<view class="iconfont m_logo color3">&#xe752;</view>
					<view class="m_txt">{{$t('index.more_short')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_con">
					<block v-for="(item,index) in video_rec" :key="index">

						<!-- #ifdef APP -->
						<view class="movie2" @click="$r('/pages/popular/shortDetail?id='+item.id)">
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie2" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)">
						<!-- #endif -->
							<view class="iconfont star" v-if="index == 0">&#xe607;</view>
							<view class="iconfont star ss" v-else>&#xe6b1;</view>
							<view class="tip">{{$t('index.hot')}}</view>
							<view class="msg">{{item.episode_num}} {{$t('集全')}}</view>
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
							<!-- <view class="txt2">
								<u-parse :content="item.remark"></u-parse>
							</view> -->
							<view class="txt3" v-if="index == 0"><label class="lb">{{$t('index.top')}}1</label></view>
							<view class="txt4" v-else>{{get_cate_name(item.cate_id)}}</label></view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	export default {
		mixins:[lang_mix],
		data() {
			return {
				cate_list : [],
				movie_type: 0,
				all_note_list : [],
				note_list : [],
				ad_list : [],
				video_hot : [],
				video_new : [],
				video_rec : [],
				
				applicationLocale: '',
				l_index: 0,
				local_arr:[{lang:'',txt:''}],
				adBanner:[
					{img:'/static/del/ad_img.png',id:'1'},
					{img:'/static/del/ad_img.png',id:'2'},
					{img:'/static/del/ad_img.png',id:'3'}
				],
				newList:[],
			}
		},
		filters:{
			
		},
		onLoad() {
			this.initCate();
            this.initData();
			this.local_arr = [
					{lang:'en',txt:this.$t('locale.en')},
					{lang:'zh-Hant',txt:this.$t('locale.zh-hant')},
					{lang:'jp',txt:this.$t('locale.jp')}
				]
			let that = this;
			this.applicationLocale = uni.getLocale();
			this.local_arr.forEach((item,index)=>{
				if(item.lang == this.applicationLocale){
					that.l_index = index;
				}
			})
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
				this.set_note();
			});
		},
		onShow() {
			
		},
		methods: {
			initData(){
				let url = this.site_url + 'api/index/index';
				this.areq(url).then(res=>{
					if(res.code == 1){
					     let ret = res.data;
						 this.ad_list = ret.ad_list;
						 this.all_note_list = ret.note;
						 this.video_hot = ret.video_hot;
						 this.video_new = ret.video_new;
						 this.video_rec = ret.video_rec;
						 this.set_note();
					}
					
				})
				
			},
			set_note(){
				let lang_id = 0;
				switch(this.applicationLocale){
					case 'en':
					lang_id = 1;
					 break;
					case 'jp':
					 lang_id = 2;
					break;
				};
				let list = this.all_note_list.filter(vo => {return vo.lang == lang_id});
				this.$set(this,'note_list',list);
			},
			onLocaleChange(e) {
				this.l_index = e.detail.value;
				let code = this.local_arr[e.detail.value].lang;
				uni.setLocale(code);
				this.$i18n.locale = code;
				// #ifdef H5
				 location.reload();
				// #endif
			},
			movieTypeChange(e){
				this.movie_type = e.currentTarget.dataset.type;
				let id = this.cate_list[this.movie_type].id;
				let title = this.show_ct(this.movie_type);
				// console.log(title)
				this.$r('/pages/index/seach_list?id='+id+'&title='+title);
			}
		}
	}
</script>

<style lang="scss">
page{
	background: $main_bg_color;
}
.head{
	width: 100%;
	position: fixed;
	z-index: 98;
	top: 0;
	padding: calc(var(--status-bar-height) + 5vw) 4% 2vw;
	background: $main_color2;
	.seach{
		width: 100%;
		display: flex;
		align-items: center;
		.s_con{
			flex: 1;
			padding: 0 4vw;
			background: $main_color2_s;
			height: 12vw;
			display: flex;
			align-items: center;
			border-radius: 7vw;
			.h_icon{
				font-size: 5vw;
				color: $main_color_s;
			}
			.h_input{
				flex: 1;
				margin: 0 3vw;
				line-height: 8vw;
				color: $main_color5;
			}
			.s_icon{
				width: 5vw;
			}
		}
		.lang {
			z-index: 2;
			right: -4vw;
			padding: 2vw;
			background: #fff;
			height: 10vw;
			font-size: 3.8vw;
			color: #222;
			font-weight: bold;
			margin-left: 4vw;
			border-radius: 2vw;
			.l_icon {
				font-size: 4vw;
				margin-right: 1vw;
			}
		}
	}
	.hot{
		margin-top: 3vw;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		.btn:not(:first-of-type){
			margin-left: 2vw;
		}
		.btn{
			display: inline-block;
			padding: 2vw 3vw;
			background: $main_color2_s;
			color: $main_color5;
			font-size: 3.5vw;
			border-radius: 2vw
		}
		.btn_s{
			background: $main_color_s;
			color: #fff;
		}
	}
}
.bg_item {
	@include bg_item(60vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 31vw) 4% 0;
	.ad_item{
		width: 100%;
		padding-top: 1vw;
		border-radius: 2vw;
		overflow: hidden;
		.ad_box{
			width: 100%;
			height: 50vw;
			.ad_img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.new_item{
		@include card_style();
		margin-top: 3vw;
		display: flex;
		align-items: center;
		padding: 4vw;
		height: 12vw;
		overflow: hidden;
		position: relative;
		background: $main_color2;
		.n_title{
			font-size: 6vw;
			color: $main_color_s;
		}
		.n_con{
			flex: 1;
			height: 6vw !important;
			padding: 0 3vw;
			.n_box{
				width: 100%;
				height: 6vw;
				line-height: 6vw;
				.new{
					width: 100%;
					font-size: 4vw;
					color: $main_color_s;
					@include text_over_style(1);
				}
			}
		}
	}
	.lottery_item{
		@include card_style();
		position: relative;
		margin-top: 4vw;
		overflow: hidden;
		height: 16vw;
		display: flex;
		align-items: center;
		.l_bg{
			position: absolute;
			width: 100%;
			height: 16vw;
			z-index: 1;
			top: 0;
			left: 0;
		}
		.l_con{
			position: relative;
			z-index: 2;
			color: $main_color_s2;
			font-weight: bold;
			font-size: 4vw;
		}
	}
	.movie_item{
		margin-top: 4vw;
		.m_tit{
			width: 100%;
			display: flex;
			align-items: center;
			.m_logo{
				color: #FF6540;
				font-size: 5.5vw;
			}
			.color2{
				color: #ff6063;
			}
			.color3{
				color: #F42C5D;
			}
			.m_txt{
				flex: 1;
				font-size: 4vw;
				font-weight: bold;
				color: $main_color5;
				padding: 0 2vw;
			}
			.more{
				font-size: 3.4vw;
				color: #999;
				font-weight: bold;
			}
		}
		.m_con{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.movie:not(:nth-child(3n+1)){
				margin-left: 2%;
			}
			.movie{
				width: 32%;
				margin-top: 3.2vw;
				position: relative;
				.tip{
					position: absolute;
					z-index: 2;
					padding: 0.5vw 2vw;
					background: linear-gradient(45deg, $main_color 0%, $main_color_s2 100%);
					color: #fff;
					font-size: 2.6vw;
					border-radius: 0 2vw 0 3vw;
					right: 0;
					top: 0;
				}
				.img{
					width: 100%;
					height: 40vw;
					border-radius: 2vw;
				}
				.txt{
					width: 100%;
					padding-top: 0.5vw;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
				}
			}
			.movie2:not(:nth-child(2n+1)){
				margin-left: 2%;
			}
			.movie2{
				width: 49%;
				margin-top: 3.2vw;
				position: relative;
				background: $main_color2_s;
				border-radius: 2vw;
				padding-bottom: 3vw;
				.star{
					position: absolute;
					z-index: 2;
					width: 8vw;
					height: 8vw;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 5vw;
					top: 0;
					left: 0;
					border-radius: 2vw 0 2vw 0;
					background: rgba(0, 0, 0, 0.3);
				}
				.ss{
					color: $star_s;
				}
				.tip{
					position: absolute;
					z-index: 2;
					padding: 0.5vw 2vw;
					background: #FE5F15;
					color: #fff;
					font-size: 2.6vw;
					border-radius: 0 2vw 0 3vw;
					right: 0;
					top: 0;
				}
				.msg{
					position: absolute;
					z-index: 2;
					font-size: 3.2vw;
					color: #fff;
					top: 48vw;
					right: 2vw;
					padding: 0.5vw 2vw;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 1vw;
				}
				.img{
					width: 100%;
					height: 60vw;
					border-radius: 2vw;
					z-index: 1;
					position: relative;
				}
				.txt{
					width: 100%;
					padding: 0.5vw 2vw 0;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
				}
				.txt2{
					width: 100%;
					padding: 1vw 2vw 0;
					font-size: 3.2vw;
					color: $main_color4;
					@include text_over_style(1);
				}
				.txt3{
					width: 100%;
					display: flex;
					margin-top: 2.5vw;
					.lb{
						padding: 0 2vw;
						background: #FEEFE8;
						color: #FD541E;
						font-size: 3.2vw;
						height: 5.5vw;
						line-height: 5.5vw;
						border-radius: 1vw;
					}
				}
				.txt4{
					width: 100%;
					padding: 2.5vw 2vw 0;
					line-height: 5.5vw;
					font-size: 3.2vw;
					color: $main_color4;
					@include text_over_style(1);
				}
			}
		}
	}
}
</style>
